<template>
    <view class="Evalyate" v-if="commentData.data">
        <view class="Evalyate_top">
            <text class="Count">评价（{{ allcount }}）</text>
            <view class="d-flex a-center" @click="toComment">
                <text class="color_66 size24">全部评价</text>
                <view class="iconfont icon-a-zujian32 color_66 size20 p-left10"></view>
            </view>
        </view>
        <view class="list" :class="{ first: index == 0 }" v-for="(item, index) in commentData.data" :key="index">
            <image :src="$imgUrls(item.v_headimg)" mode="aspectFill" class="v_headimg"></image>
            <view class="warpper">
                <view class="info">
                    <text class="flex-1 black size28 bold ellipsis p-right20">{{ item.v_name }}</text>
                    <text class="color_66 size20">{{ item.created_at }}</text>
                </view>
                <u-rate :count="5" v-model="item.star" readonly allowHalf :gutter="2" inactiveColor="#cecece" activeColor="#FF3355"></u-rate>
                <view class="color_33 h6 m-top16">{{ item.comment_word }}</view>
                <view class="comment_pic" v-if="item.comment_pic.length">
                    <image
                        :src="$imgUrls(pic)"
                        @click="$common.previewImgs(picIndex, item.comment_pic)"
                        mode="aspectFill"
                        class="pic_Img"
                        v-for="(pic, picIndex) in item.comment_pic"
                        :key="picIndex"
                    ></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ['goods_id'],
        data() {
            return {
                commentData: ''
            };
        },
        created() {},
        methods: {
            get_comment() {
                this.$http
                    .get({
                        url: '/singleSaleApi/get_comment',
                        data: {
                            goods_id: this.goods_id,
                            page: 1,
                            pageNum: 2
                        }
                    })
                    .then((res) => {
                        if (res.errcode != '100') return this.$Toast(res.msg);
                        this.commentData = res;
                    });
            },
            toComment() {
                this.toUrl(`/commentPage/comment/commentList?gid=${this.goods_id}`);
            }
        },
        computed: {
            allcount() {
                if (!this.commentData || !this.commentData.count) return 0;
                return this.commentData.count.allcount > 999 ? '999+' : this.commentData.count.allcount;
            }
        },
        watch: {
            goods_id(newVal, oldVal) {
                if (newVal) this.get_comment();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .Evalyate {
        width: 100%;
        background-color: #fff;
        margin-top: 24rpx;
        padding: 0 24rpx;
        display: flex;
        flex-direction: column;
        .Evalyate_top {
            width: 100%;
            padding: 24rpx 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .Count {
                color: #000;
                font-size: 32rpx;
                font-weight: 500;
            }
        }

        .list {
            width: 100%;
            padding: 32rpx 0;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            .v_headimg {
                width: 72rpx;
                height: 72rpx;
                border-radius: 50%;
                margin-right: 18rpx;
                display: block;
            }
            .warpper {
                flex: 1;
                .info {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }
                .comment_pic {
                    width: 100%;
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 16rpx;
                    margin-top: 16rpx;
                    .pic_Img {
                        width: 184rpx;
                        height: 184rpx;
                        border-radius: 10rpx;
                    }
                }
            }
        }
        .first {
            padding-top: 0;
        }
        .list:last-child {
            border: none;
        }
    }
</style>
